/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useEffect, useRef, useState} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    Button,
    StatusBar,Image,
    NativeModules, Dimensions, PermissionsAndroid,
} from 'react-native';
import VlcPlayer from '../local_modules/react-native-vlc-player'
import RNFS from 'react-native-fs'

const screenWidth = Math.round(Dimensions.get('window').width)



export default ({}) => {

    const vlcPlayer = useRef()
    const [snapPic,setSnapPic] = useState(null)
    useEffect(()=>{
        //初始化

        updateImages()

    },[])

    const updateImages = ()=>{
        RNFS.readdir(getImagePath()).then(res=>{
            console.log('read dir',res)

        })
    }

    const getImagePath = ()=>{
        let path = RNFS.DocumentDirectoryPath + '/BGBT/image';
        RNFS.exists(path).then(isExit=>{
            if(isExit){
                // console.log('path 存在:' + path)
            }else{
                RNFS.mkdir(path).then(res=>{
                    getImagePath()
                });
            }
        })

        return path
    }



    return (
        <View style={styles.container}>

            <View style={{height:200,width:'100%',backgroundColor:'#000'}}>
                <VlcPlayer
                    ref={vlcPlayer}
                    style={{height:200,width:screenWidth}}
                    paused={false}
                    source={{
                        uri:'rtsp://192.168.1.254/xxxx.mov',
                        // uri:'http://cdn.goluk.cn/video/t1_2.mp4',
                        autoplay: true,
                        initOptions: [
                            '--codec=mediacodec,iomx,all',

                        ],
                    }}
                    onVLCPlaying={(data)=>{
                        console.log('onVLCPlaying',data)
                    }}

                    onVLCSnapShot={(data)=>{
                        console.log('onVLCSnapShot result',data)
                        if(data.isSuccess){
                            RNFS.exists(data.path).then(isExist=>{
                                if(isExist){
                                    setSnapPic(data.path)
                                    updateImages()
                                }else{
                                    console.log('截图不存在')
                                }
                            })


                        }

                    }}
                />
            </View>

            <View style={{height:20}}/>
            <Button
                title={'拍照'}
                onPress={()=>{

                    let pathName = new Date().getTime() + "._jpg";
                    let path = `${getImagePath()}/${pathName}`;

                    vlcPlayer.current.snapshot(path)

                }}
            />

            <Text>{}</Text>
            {
                snapPic && (
                    <Image source={{uri:snapPic}} resizeMode={'contain'} style={{width:screenWidth,height:400}}/>
                )
            }
        </View>
    );
};

const styles = StyleSheet.create({

    container:{
        flex:1,
    }
});


